<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>

  <meta charset="utf-8" />
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Theme by CssTemplateHeaven</title>
  
  <!-- Included CSS Files (Compressed) -->
  <link rel="stylesheet" href="stylesheets/foundation.min.css">
  <link rel="stylesheet" href="stylesheets/main.css">
  <link rel="stylesheet" href="stylesheets/app.css">
  
  <script src="javascripts/modernizr.foundation.js"></script>
  


  <link rel="stylesheet" href="ligature.css">

  <!-- Google fonts -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />

  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>

<body>

<!-- ######################## Main Menu ######################## -->
 
<nav>

     <div class="twelve columns header_nav">
     <div class="row">
      
        <ul id="menu-header" class="nav-bar horizontal">
        
         <li><a href="index.html">Home</a></li>
      
          <li class="has-flyout">
           <a href="#">Example Pages</a><a href="#" class="flyout-toggle"></a>
            <ul class="flyout"><!-- Flyout Menu -->
              <li class="has-flyout"><a href="blog.html">Blog</a></li>
              <li class="has-flyout"><a href="blog_single.html">Blog Single Page</a></li>
              <li class="has-flyout"><a href="products-page.html">Products Page</a></li>
              <li class="has-flyout"><a href="product-single.html">Product Single</a></li>
              <li class="has-flyout"><a href="pricing-table.html">Pricing Table</a></li>
              <li class="has-flyout"><a href="contact.html">Contact Page</a></li>
            </ul> 
          </li><!-- END Flyout Menu -->
      
          <li class=""><a href="galleries.html">Boxed Gallery</a></li>
          <li class=""><a href="portfolio.html">Portfolio Gallery</a></li>
          <li class=""><a href="pinterest-style.html">Pinterest Gallery</a></li>
          <li class=""><a href="tiles.html">Tiles</a></li>
      
        </ul>
        
        <script type="text/javascript">
         //<![CDATA[
         $('ul#menu-header').nav-bar();
          //]]>
        </script>
        
      </div>  
      </div>
      
</nav>
      
      
<!-- ######################## Header ######################## -->
        
        <header>
              <h1 class="welcome_text">Popular Products</h1>    
        </header>
        
<!-- ######################## Section ######################## -->
   
       <section class="section_light">

        
			<div class="main">
				<div id="mi-slider" class="mi-slider">
					<ul>
						<li><a href="#"><img src="ItemSlider/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="ItemSlider/images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="ItemSlider/images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="ItemSlider/images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
						<li><a href="#"><img src="ItemSlider/images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
					</ul>
                    
					<nav>
						<a href="#">Shoes</a>
						<a href="#">Accessories</a>
						<a href="#">Watches</a>
						<a href="#">Bags</a>
					</nav>
                    
				</div>
			</div>
     
</section>
		
<!-- ######################## Section ######################## -->

   <section class="section_normal">
   
      <div class="row"> 
      
      <h2>Latest Products</h2>
      
      
		<div id="container">
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
			<!-- product box -->
			<div class='box photo col2'>
				<a href="product-single.html"><img src='images/prod_thumb.png' alt="desc" /></a>
				<p>
					Product Name
				</p>
				<p style='text-align:center; margin-bottom:12px'>
					<a href='product-single.html' class='button small secondary round'>More Info &#187;</a>
				</p>
			</div>
		</div>
		<!-- end Masonry container -->
        
        </div>
        
        </section>
        
        
<!-- ######################## Footer ######################## -->  
      
<footer>

      <div class="row">
      
          <div class="twelve columns footer">
              <a href="http://twitter.com/dieterarno" class="lsf-icon" style="font-size:16px; margin-right:15px" title="twitter">Twitter</a> 
              <a href="http://csstemplateheaven.com/csstemplateheaven" class="lsf-icon" style="font-size:16px; margin-right:15px" title="facebook">Facebook</a>
              <a href="http://csstemplateheaven.com/csstemplateheaven" class="lsf-icon" style="font-size:16px; margin-right:15px" title="pinterest">Pinterest</a>
              <a href="http://twitter.com/dieterarno" class="lsf-icon" style="font-size:16px" title="instagram">Instagram</a>
          </div>
          
      </div>

</footer>		  

<!-- ######################## Scripts ######################## -->

      <!-- Included JS Files (Compressed) -->
    <script src="javascripts/foundation.min.js" type="text/javascript"></script> 
    <!-- Initialize JS Plugins -->
     <script src="javascripts/app.js" type="text/javascript"></script>
     

        <script src="ItemSlider/js/modernizr.custom.63321.js"></script>         
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
		<script src="ItemSlider/js/jquery.catslider.js"></script>
		<script>
			jQuery.noConflict()(function($){	
                 $( '#mi-slider' ).catslider();
			});
		</script>
        
        <!-- Masonry for galleries -->
		<script src="javascripts/masonry.js" type="text/javascript">
		</script>
		<script type="text/javascript">
//<![CDATA[
      jQuery.noConflict()(function($){	
        var $container = $('#container');
        $container.imagesLoaded( function(){
          $container.masonry({
            itemSelector : '.box',
                        isFitWidth: true,
                        isAnimated: true
          });
        });
      });
  //]]>
  </script>
		<!-- END Masonry -->
    
</body>
</html>